<template>
    <div class="login">
        <div class="content">
    <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 18 }"
    autocomplete="off"
    @finish="onFinish"
  >
    <a-form-item
      label="账号"
      name="username"
      :rules="[{ required: true, message: '请输入账号!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="密码"
      name="password"
      :rules="[{ required: true, message: '请输入密码!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item name="remember" :wrapper-col="{ offset: 10, span: 16 }">
      <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 10, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
        </div>
    </div>
</template>

<script setup>
//导入路由器对象
import {useRouter} from 'vue-router'
//导入请求api
import {$login} from '../api/login'
// import {$post,$setToken} from '../utils/request'
import {$post} from "../utils/request"
//导入组合式api
import {reactive} from 'vue'
let $router = useRouter()
//表单数据
    const formState = reactive({
    //登录名
      username: '',
    //密码
      password: '',
    //记住我
      remember: false,
    });
    //登录方法
    const onFinish = async values => {
      let {username,password,remember} = values
      // let ret = await $post ("base/login",{username,password,kick:99,server:1,loginname:username})
      let ret = await $login ({username,password,kick:99,server:1,loginname:username})
      // if(ret.code===0){
      //   $router.push('/layout')
      // }
      console.log('ret',ret)
      if(ret){
        //跳转到布局页
        $router.push('/layout')
      }
    };
</script>                                                  
<style lang ="css" scoped>
.login{
    width:100vw;
    height:100vh;
    /* background: linear-gradient(to bottom,rgb(5,57,79),rgb(200,235.250));  */
    display: flex;
    background:url('../background.png');
    justify-content: center;
    align-items: center;
}
.content{
    padding: 20px;
    width: 500px;
    background: white;
    border: 1px solid #fff;
    border-radius: 6px;
}

</style>